<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="telephone=no" name="format-detection" />
  <meta itemprop="name" content="" />
  <meta itemprop="image" content="/img/share-icon.jpg" />
  <meta name="description" itemprop="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/yyzbk/yy_signup.css">
  <% if(typeId==2) {%>
    <title>2018 考前冲刺急训</title>
    <%} else {%>
    <title>高考英语阅读提分冲刺</title>
    <%}%>
  <% include ../component/_common_tongji.html %>
    <style>
      [v-cloak] {
        display: none;
      }

      #show {
        display: none;
      }
    </style>
    <script>
      var scale = 1 / devicePixelRatio;
      document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
      window.onload = function () {
        var compa = document.querySelector('#show');
        if (compa) {
          compa.style.display = 'block';
        }
      }
      function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        if ((bIsIpad || bIsIphoneOs)) {
          document.getElementsByTagName('html')[0].style.fontFamily = 'PingFangSC-Regular';
        }
      }
      browserRedirect();
    </script>
</head>

<body>
  <div id="app" style="height:100%">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div v-cloak class="cloak">
      <div class="content" v-show="!signUpInfo.token">
        <%if(typeId == 2) {%>
          <p class="login">登录报名</p>
          <% include ../signup/login.html %>
            <%} else {%>
              <div class="bg">
                <img src="/img/02_signup.png" alt="">
                <% include ../signup/login.html %>
              </div>
              <%}%>
      </div>
      <div class="pay" v-show="signUpInfo.token && signUpInfo.token != ''">
        <% include ../signup/top_infomation.html %>
          <div class="line"></div>
          <%if(typeId == 2) {%>
            <p class="info">{{exam_detail}}</p>
            <%}%>
              <% include ../signup/yy/userInfo.html %>
                <% include ../signup/footer_pay_type.html %>
                  <% include ../signup/yy/footer.html %>
      </div>
    </div>
  </div>
  <script src="https://sfile.tl100.com/js/libs/vue.min.js"></script>
  <script src="https://sfile.tl100.com/js/libs/axios.min.js"></script>
  <script src="/js/api.js"></script>
  <script src="/js/login/login.js"></script>
  <script src="/js/pay/pay.js"></script>
  <script src="/js/wx.js"></script>
  <script src="/js/getuserinfo.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <% if(pt == 'qq'){%>
    <script src="https://sfile.tl100.com/js/libs/qqapi.js"></script>
    <%}%>
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            smsText: '发送',
            sign_up_price: '258.00',
            title: '',
            original_price: '',
            titleImg: '',
            typeId: '',
            exam_detail: '',
            loginInfo: {
              phone: '',
              sms: ''
            },
            payMode: {
              pay: '',
              yhmoney: '',
            },
            signUpInfo: {
              realname: '',
              qq: '',
              city: '',
              pay_type: 1,
              exam_id: 2,
              from_invitation_code: '',
              return_url: '',
              origin: '',
              email: '',
              code: '',
              token: '',
              from: 'wap',
            },
            addAddressMode: false,
            smsSending: false,
            enter: false,
            submiting: false,
            pay: true,
          },
          mounted: function () {
            <% if (typeId == 2) {%>
              this.signUpInfo.exam_id = <%= exam_id %>
                this.typeId = 2;
            <%} else {%>
              this.original_price = '199.00';
              this.title = '晓峰直播课';
              this.titleImg = '/img/03-01.jpg';
              <%}%>
              this.signUpInfo.token = localStorage.getItem('token');
            if (this.signUpInfo.token && this.signUpInfo.token != '') {
              this.getUserInfo();
            }
            // 获取微信登录的code，从首页传过来
            <% if (code) {%>
              this.signUpInfo.code = "<%= code %>";
            <%}%>
            <% if (origin) {%>
              this.signUpInfo.origin = "<%= origin %>";
            <%}%> 
            // 获取从首页传来的邀请码，首页传来的邀请码一般是别人分享的邀请码
            <% if (invitation_code) {%>
              this.signUpInfo.from_invitation_code = "<%= invitation_code %>";
              this.invitation_money = '179.00';
            <%}%>
            // 在首页的controllers里判断页面在哪里打开，pt为wechat/wap/qq
            <% if (pt) {%>
              this.signUpInfo.from = "<%= pt %>";
            <%}%>
            <% if (typeId == 2) {%>
              // 是冲刺课的时候，页面背景颜色、发送按钮、登录按钮、支付按钮的背景颜色都变色
              document.querySelector('.content').style.backgroundColor = '#25303f';
              document.querySelector('.send').style.backgroundColor = '#8C9095';
              this.titleImg = '/img/jxsignup.jpg';
              document.querySelector('.phone').querySelector('button').style.backgroundColor = '#B02E2E';
              document.querySelector('.btn').style.backgroundColor = '#B02E2E';
            <%}%>
            if (this.signUpInfo.from == 'wechat') {
              this.signUpInfo.pay_type = 1;
            }
            if (this.signUpInfo.from == 'wap') {
              this.signUpInfo.pay_type = 2;
            }
            if (this.signUpInfo.from == 'qq') {
              this.signUpInfo.pay_type = 3;
            }
            if (this.typeId == 2) {
              this.signUpInfo.return_url = "https://m.tl100.com/yyzbk/signup?typeId=2";
              wxObj({
                shareUrl: 'https://m.tl100.com/yyzbk?typeId=2',
                title: '赶紧加入考前冲刺集训营！你的成绩还能再抢救一下！',
                desc: '《2018全国高考考前冲刺集训》开营啦！火速加入！',
                link: '&',
                imgUrl: '/img/kqcc_share.jpg'
              });
            } else {
              this.signUpInfo.return_url = "https://m.tl100.com/yyzbk/signup";
            }

          },
          methods: {
            getUserInfo: function () {
              var vm = this;
              var token = localStorage.getItem('token');
              <% if (typeId == 2) {%>
                getUserInfo(this, localStorage.getItem('token'), '/api/sign_up_kqcc/getUserBuy', function (res) {
                  var res_data = res.data.msg;
                  for (var i = 0; i < res_data.sign_up_info.length; i++) {
                    // 如果数组中有一个元素的exam_id和传入的exam_id一样且元素是购买状态就跳转成功页
                    if (res_data.sign_up_info[i].exam_id == vm.signUpInfo.exam_id && res_data.sign_up_info[i].state > 0) {
                      location.replace("/yyzbk/success?typeId=2&invitation_code=" + res_data.invitation_code);
                    }
                  }
                })
                // 根据exam_id获取课程名、价格、课程信息
                api.post('/api/sign_up_kqcc/getKqccInfo', {
                  exam_id: this.signUpInfo.exam_id
                }).then(function (res) {
                  if (res.data.res_code == 1) {
                    vm.original_price = res.data.msg.sign_up_price;
                    vm.title = res.data.msg.exam_name;
                    vm.exam_detail = res.data.msg.exam_detail;
                  } else {
                    setLog('/api/sign_up_kqcc/getKqccInfo:fail', JSON.stringify(res.data));
                  }
                }).catch(function (err) {
                  setLog('/api/sign_up_kqcc/getKqccInfo:catch', JSON.stringify(error));
                })
                  <% } else {%>
                    // 晓峰的个人信息接口
                    getUserInfo(this, token, '/api/sign_up_xiaofeng/getUserSignUp', function (res_data) {
                      var res = res_data;
                      // exam_id为2且购买过的就跳转成功页
                      if (res.data.msg.exam_id == 2 && res.data.msg.state > 0) {
                        location.replace("/yyzbk/success?invitation_code=" + res.data.msg.invitation_code);
                      }
                    })
                    <% }%>
            },
            handleSend: function () {
              // 发送验证码接口
              send(this);
            },
            handleEnter: function () {
              var vm = this;
              enter(this, function (res) {
                // 登录接口，获取手机号所有的信息
                var res_data = res.data.msg.all_sign_up_info;
                for (var i = 0; i < res_data.length; i++) {
                  // 循环遍历数组，如果当前传入的exan_id和某一个元素的exam_id相同并且支付过并且是考前冲刺就跳转考前冲刺的成功页并带上邀请用户的邀请码
                  if (res_data[i].exam_id == vm.signUpInfo.exam_id && res_data[i].state > 0 && vm.typeId == 2) {
                    location.replace("/yyzbk/success?typeId=2&invitation_code=" + res_data[i].invitation_code);
                    // 如果exam_id为2但是typeId为空的时候说明是晓峰的直播课，state>0就跳转晓峰的成功页
                  } else if (res_data[i].exam_id == 2 && res_data[i].state > 0 && vm.typeId == '') {
                    location.replace("/yyzbk/success?invitation_code=" + res_data[i].invitation_code);
                  }
                }
                // 登录后获取token再获取个人信息
                vm.signUpInfo.token = res.data.msg.token;
                vm.getUserInfo();
              })
            },
            handleSubmit: function () {
              if (this.submiting) {
                return;
              }           
              // 去除空格验证 
              if (this.signUpInfo.realname.trim() == "") {
                alert('姓名不能为空');
                return;
              }
              if (this.signUpInfo.realname.length > 6) {
                alert('最多输入6个汉字或英文字母！');
                return;
              }
              if (this.signUpInfo.qq.trim() == '') {
                alert('qq号不能为空');
                return;
              }
              // 根据支付类型判断查询接口。
              if (this.signUpInfo.pay_type == 1) {
                var getOrder = '/api/sign_up_xiaofeng/getWxOrder';
              } else if (this.signUpInfo.pay_type == 3) {
                var getOrder = '/api/sign_up_xiaofeng/getQQOrder';
              }
              var that = this;
              this.submiting = true;
              if (this.typeId == 2) {
                // 是冲刺课的时候传入支付接口和查询订单接口
                submit(this, '/api/sign_up_kqcc/buy', '/api/pre_buy_book/getOrder');
              } else {
                // 是晓峰课的时候有是传入支付接口和三个不同平台的查询接口
                submit(this, '/api/sign_up_xiaofeng/signUp', getOrder);
              }

            },
            handleToggle: function () {
              // 切换账号
              localStorage.removeItem('token');
              location.replace('/yyzbk/signup');
            }
          }
        })
      </script>
</body>

</html>